
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;;
    src: url("../assets/fonts/MaterialIcons-Regular.eot"); /* For IE6-8 */
    src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url("../assets/fonts/MaterialIcons-Regular.woff2") format('woff2'),
      url("../assets/fonts/MaterialIcons-Regular.woff") format('woff'),
      url("../assets/fonts/MaterialIcons-Regular.ttf") format('truetype');
}

.icon {
	@include noselect();

	&--material {
		font-family: 'Material Icons';
		font-weight: normal;
		font-style: normal;
		line-height: 1;
		text-transform: none;
		letter-spacing: normal;
		word-wrap: normal;
		white-space: nowrap;
		direction: ltr;
		vertical-align: top;
		font-size: 1.3em;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
		-moz-osx-font-smoothing: grayscale;
		font-feature-settings: 'liga';
	}

	&--svg {
		&.source {
			img {
				max-width: 1rem;
			}
		}

		@include theme('dark') {
			filter: brightness(0) invert(1);
		}
	}

	&--spin {
		@include spin(1s);
		padding: 0 0.32em !important;
	}

	&--css {
		&.icon--playing {
			display: inline-block;
			position: relative;
			margin-left: 8px;
			width: 16px;
			height: 1em;

			@keyframes playing_bar {
				0% {
					height: 0%;
				}
				12.5% {
					height: 75%;
				}
				25% {
					height: 100%;
				}
				37.5% {
					height: 10%;
				}
				50% {
					height: 40%;
				}
				62.5% {
					height: 50%;
				}
				75% {
					height: 30%;
				}
				87.5% {
					height: 55%;
				}
				100% {
					height: 0%;
				}
			}

			span {
				@include animate();
				display: block;
				position: absolute;
				bottom: 0;
				width: 4px;
				height: 100%;
				background: colour('turquoise');
				animation-name: playing_bar;
				animation-iteration-count: infinite;

				&:nth-child(1){
					left: 0;
    				animation-duration: 2s;
				}

				&:nth-child(2){
					left: 6px;
    				animation-duration: 4s;
				}

				&:nth-child(3){
					left: 12px;
    				animation-duration: 1s;
				}
			}

			&.js--stopped,
			&.js--paused {
				span {
					animation-play-state: paused;
				}
			}
		}
	}
}
